<template>
  <div>
      <div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到好又多生鲜!</div>
			<div class="fr">
				<div class="login_info fl" v-if="username">
					欢迎您：<em>{{username}}</em>
					<a href="javascript:;" @click="logout">&nbsp;&nbsp;注销</a>
				</div>
				<div class="login_btn fl" v-else>
					<router-link to="/login">登录</router-link>
					<span>|</span>
					<router-link to="/register">注册</router-link>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.html">用户中心</a>
					<span >|</span>
					<router-link to="/cart">我的购物车</router-link>
					<span >|</span>
					<a href="user_center_order.html">我的订单</a>
				</div>
			</div>
		</div>		
	</div>
  </div>
</template>

<script>
export default {
    data() {
        return {
          username:sessionStorage.getItem('username')  
        }
    },
    methods:{
        logout(){
			//因为我们前端目前状态保持在前端，放到sessionStorage中，因此退出登录就是删除
			const sure=confirm('确定要注销账号吗？')   // confirm是 JavaScript 原生提供的 一个 确认对话框
			if(sure){
				sessionStorage.clear()  //清空状态缓存
				this.$router.go(0)     //主动刷新页面
			}
		}
    }
}
</script>

<style>

</style>